<template>
  <div class="tab-control">
    <div v-for="(item, index) in titles" class="tab-control-item"
    :class="{active: index === currentIndex}" :key="index" @click="itemClick(index)">
    <span>{{item}}</span>
     
    </div> 
  </div>
</template>


<!-- 设置吸顶效果 -->
<script>
export default {
 name:'TabControl',
 props:{
    titles: {
        type: Array,
        default() {
            return []
        }
    }
 },
 data(){
    //初始化的数据
  return {
       currentIndex: 0,
  }
    
 },
 methods: {
    itemClick(index){
        // console.log(index)
        this.currentIndex = index;
        //将点击事件传出
        this.$emit('tabClick',index);
    }
 }
}
</script>

<style>

/* 设置tab的样式 */
 .tab-control {
    display: flex;
    text-align: center;
    font-size: 15px;
    height: 40px;
    line-height: 40px;
    background-color: #fff;
}
.tab-control-item{
flex: 1;
height: 40px;
line-height: 40px;
}
/* 设置上下的间隔 */
.tab-control-item span {
    padding: 5px;
}
.active {
    color:  var(--color-high-text);

}

/* 设置下标的颜色 */
.active span {
     border-bottom: 3px solid var(--color-tint);
}
</style>